<script setup>
import { ref, reactive, nextTick } from 'vue';
import { unpack } from 'rrweb';

import rrwebPlayer from 'rrweb-player';
import 'rrweb-player/dist/style.css';
import { useRrwebInfo } from '@/stores/rrwebInfo';

const { getRrwebInfo } = useRrwebInfo();

const form = reactive({
  name: '',
  region: '',
  date1: '',
  date2: '',
  delivery: false,
  type: [],
  resource: '',
  desc: '',
});

const onSubmit = () => {
  form.value.name.push('ssds');
};

const events = [];

let stopFn = null;

const startRecord = () => {
  stopFn = rrweb.record({
    emit(event) {
      events.push(event);
    },
    recordCanvas: true,
    collectFonts: true,
  });
};

const onStop = () => {
  console.log(events, 'events');

  if (!stopFn) return;
  stopFn();
};

const playRrweb = () => {
  const res = getRrwebInfo().map((item) => unpack(item));
  new rrwebPlayer({
    target: document.querySelector('#doPlay'),
    props: {
      events: res,
      width: 1024,
      height: 768,
      autoplay: true,
      showController: true,
    },
    sandboxAttr: 'allow-scripts allow-same-origin allow-popups allow-forms',
  });
};

const clearEvents = () => {
  events.length = 0;
};
</script>

<template>
  <div>
    <el-form :model="form" label-width="auto" style="max-width: 600px">
      <el-form-item label="Activity name">
        <el-input v-model="form.name" />
      </el-form-item>
      <el-form-item label="Activity zone">
        <el-select v-model="form.region" placeholder="please select your zone">
          <el-option label="Zone one" value="shanghai" />
          <el-option label="Zone two" value="beijing" />
        </el-select>
      </el-form-item>
      <el-form-item label="Activity time">
        <el-col :span="11">
          <el-date-picker
            v-model="form.date1"
            type="date"
            placeholder="Pick a date"
            style="width: 100%"
          />
        </el-col>
        <el-col :span="2" class="text-center">
          <span class="text-gray-500">-</span>
        </el-col>
        <el-col :span="11">
          <el-time-picker
            v-model="form.date2"
            placeholder="Pick a time"
            style="width: 100%"
          />
        </el-col>
      </el-form-item>
      <el-form-item label="Instant delivery">
        <el-switch v-model="form.delivery" />
      </el-form-item>
      <el-form-item label="Activity type">
        <el-checkbox-group v-model="form.type">
          <el-checkbox value="Online activities" name="type">
            Online activities
          </el-checkbox>
          <el-checkbox value="Promotion activities" name="type">
            Promotion activities
          </el-checkbox>
          <el-checkbox value="Offline activities" name="type">
            Offline activities
          </el-checkbox>
          <el-checkbox value="Simple brand exposure" name="type">
            Simple brand exposure
          </el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="Resources">
        <el-radio-group v-model="form.resource">
          <el-radio value="Sponsor">Sponsor</el-radio>
          <el-radio value="Venue">Venue</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="Activity form">
        <el-input v-model="form.desc" type="textarea" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">Create</el-button>
        <el-button>Cancel</el-button>
      </el-form-item>
    </el-form>

    <div class="flex">
      <el-button @click="startRecord">录制</el-button>
      <el-button @click="onStop">暂停</el-button>
      <el-button @click="playRrweb">播放</el-button>
      <el-button @click="clearEvents">清除</el-button>
    </div>

    <div id="doPlay"></div>
  </div>
</template>

<style scoped lang="less"></style>
